import { ClusterOutlined, ContactsOutlined, HomeOutlined } from '@ant-design/icons';
import { Avatar, Card, Col, Divider, Row, Tag, Tabs, Timeline, Alert, Typography } from 'antd';
import React from 'react';
import { useState, useEffect } from 'react';
import { FormattedMessage, useIntl, useModel } from 'umi'
import styles from './center.less'

const { TabPane } = Tabs

const CodePreview: React.FC = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);


export default function Page() {
  const { initialState } = useModel('@@initialState');
  const [action, setaction] = useState<User.ActionData[]>([])
  const intl = useIntl();
  useEffect(() => {
    const actiondata = []
    for (let i = 0; i < 11; i += 1) {
      actiondata.push({ time: "2020-01-01 21:06:00", action: "账号登陆", color: "green", id: i })
    }
    setaction(actiondata)
    return () => {

    }
  }, [])

  return (
    <div>
      <Row gutter={16}>
        <Col span={8}>
          <Card className={styles.header}>
            <div className={styles.body}>
              <Avatar src={initialState?.currentUser?.head_image} className={styles.image}></Avatar>
            </div>
            <div className={styles.nickname}>{initialState?.currentUser?.nickname}</div>
            <div className={styles.info}>
              <p><ClusterOutlined /> 交互设计师</p>
              <p><ContactsOutlined /> 贵州红帽网络技术有限责任公司</p>
              <p><HomeOutlined /> 中国/贵州/黔西南</p>
            </div>
            <Divider dashed={true} className={styles.line} />
            <div className={styles.tag}>
              <h3>标签</h3>
              <Tag color="#f50">#f50</Tag>
              <Tag color="#2db7f5">#2db7f5</Tag>
              <Tag color="#87d068">#87d068</Tag>
              <Tag color="#108ee9">#108ee9</Tag>
            </div>
            <Divider dashed={true} className={styles.line} />
            <div className={styles.team}>
              <h3>团队</h3>

            </div>
          </Card>
        </Col>
        <Col span={16}>
          <Card>
            <Tabs defaultActiveKey="1" size="large">
              <TabPane tab="最新动态" key="1">
                <Timeline className={styles.timeline}>
                  {action.map((item) => {
                    return (
                      <Timeline.Item color={item.color} key={item.id}>{item.action} {item.time}</Timeline.Item>
                    )
                  })}
                </Timeline>
              </TabPane>
              <TabPane tab="分享" key="2">
                <div>
                  <Alert
                    message={intl.formatMessage({
                      id: 'pages.welcome.alertMessage',
                      defaultMessage: '更快更强的重型组件，已经发布。',
                    })}
                    type="success"
                    showIcon
                    banner
                    style={{
                      margin: -12,
                      marginBottom: 24,
                    }}
                  />
                  <Typography.Text strong>
                    <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="高级表格" />{' '}
                    <a
                      href="https://procomponents.ant.design/components/table"
                      rel="noopener noreferrer"
                      target="__blank"
                    >
                      <FormattedMessage id="pages.welcome.link" defaultMessage="欢迎使用" />
                    </a>
                  </Typography.Text>

                  <CodePreview>yarn add @ant-design/pro-table</CodePreview>

                  <Typography.Text
                    strong
                    style={{
                      marginBottom: 12,
                    }}
                  ></Typography.Text>
                  <Typography.Text
                    strong
                    style={{
                      marginBottom: 12,
                    }}
                  >
                    <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="高级布局" />{' '}
                    <a
                      href="https://procomponents.ant.design/components/layout"
                      rel="noopener noreferrer"
                      target="__blank"
                    >
                      <FormattedMessage id="pages.welcome.link" defaultMessage="欢迎使用" />
                    </a>
                  </Typography.Text>
                  <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
                </div>
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    </div >
  )
}